
	<div class="clearfix">&nbsp;</div>
    <div class="container">
	  <div class="row makecard-pane">
		 <?php
			$font = "";
			if($fonts){
				foreach ($fonts as $key=>$value) {
					$font .= "<option value='$key'>".$value."</option>";
				}
			}
			
			
			$font_size = "";
			if( $fontSize ){
				foreach( $fontSize as $s){
					$font_size .= "<option value='$s'>".$s."</option>";
				}
			}
		 ?>
		 <?php if($ecard):
			
		 ?>
		 
		 
		  <div class="col-xs-6 col-md-8">
			<img src="<?php echo base_url($ecard['thumb']);?>">
		  </div>
		 
		 
		   <div class="col-xs-12 col-md-4">
		   <?php
		   $attributes = array('class' => 'form-horizontal', 'role' => 'form','id'=>'form_makeEcard','name'=>'form_makeEcard');
			echo form_open_multipart(site_url('ecard/createAction'),$attributes);
		   ?>
		    <input type="hidden" name="master" value="<?php echo $ecard['master'];?>">
				<?php
				
					//所有属性
					foreach($attrs as $key => $attr){
					
						//type == 0是文本类型
						if($attr['type'] == 0){
				?>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label"><?php echo $attr['attr']?>:</label>
						<div class="col-sm-10">
						<input type="text"  name='attr[]' rangelength="1,<?php echo $attr['size']?>" required/>
						<select name="font[]"><?php echo $font;?></select>
						<select name="fontSize[]"><?php echo $font_size;?></select>
						<input name="fontColor[]" value="#000000"  type="text" class="input_cxcolor" readonly/>
						<div class="auxiliary-text">限制1-<?php echo $attr['size']?>个字</div>
						</div>
					</div>

					<?php
					}else if($attr['type'] == 1){
					//type == 1是多行文本
				?>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label"><?php echo $attr['attr']?>:</label>
						<div class="col-sm-10">
						<textarea  name='attr[]' rangelength="1,<?php echo $attr['size']?>" required></textarea>
						<select name="font[]"><?php echo $font;?></select>
						<select name="fontSize[]"><?php echo $font_size;?></select>
						<input name="fontColor[]" value="#000000"  type="text" class="input_cxcolor" readonly/>
						<div class="auxiliary-text">限制1-<?php echo $attr['size']?>个字</div>
						</div>
					</div>

						<?php
							}
							
							/*type == 2 是图像属性
							* 图像类型则增加相应的，file类型节点类型
							*/
							
							elseif($attr['type'] == 2){
						?>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label"><?php echo $attr['attr']?>:</label>
						<div class="col-sm-10">
						<input type="file" name='image_<?php echo $key;?>' required/>
						<div class="auxiliary-text">png格式图片 最大宽:<?php $size = explode("|",$attr['size']); echo $size[0];?>,最大高:<?php echo $size[1]?></div>
						<select style="display:none;" name="font[]"><option></option></select>
						<select  style="display:none;"  name="fontSize[]"><option></option></select>
						<input name="fontColor[]" value="#000000"  type="text" class="input_cxcolor" readonly style="display:none;"/>
						</div>
					</div>
						<?php
							}
							
							/*type == 3 是图像或文字属性
							* 图像类型则增加相应的file节点
							*/
							elseif($attr['type'] == 3){
						?>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label"><?php echo $attr['attr']?>:</label>
						<div class="col-sm-10">
						<input type="text" name="attr[]"/> 或<input type="file" name='image_<?php echo $key;?>'/>
						<div class="auxiliary-text">png格式图片 最大宽:<?php $size = explode("|",$attr['size']); echo $size[0];?>,最大高:<?php echo $size[1]?>，文字限制<?php echo $size[2]?>个字</div>
						<select name="font[]"><?php echo $font;?></select>
						<select name="fontSize[]"><?php echo $font_size;?></select>
						<input name="fontColor[]" value="#000000"  type="text" class="input_cxcolor" readonly />
						</div>
					</div>
						<?php
							}
						?>
					<div class="form-group">
				   <input type="hidden" name='attrid[]' value="<?php echo $attr['id']?>"/>
				   <input type="hidden" name='attrtype[]' value="<?php echo $attr['type']?>"/>
				   <input type="hidden" name='coordinate[]' value="<?php echo $attr['coordinate']?>"/>
				   <input type="hidden" name='size[]' value="<?php echo $attr['size']?>"/>
				   <input type="hidden" name='attrname[]' value="<?php echo $attr['attr']?>"/>
				   
				   </div>
				   <?php
					}
				?>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
						<button type="button" id="Preview" data-loading-text="生成预览中..." class="btn">预览</button>
						<button type="button" id="Submit" class="btn btn-primary">生成</button>
						  <button type="reset" class="btn btn-default">重填</button>
						</div>
					</div>
							  
		   <?php 
			echo form_close();
		   endif;?>
		   </div>
		 
		
	  </div>
      <!-- row of columns -->

    </div> <!-- /container -->
	<link rel="stylesheet" href="<?php echo base_url($this->config->item('public'))?>/assets/js/jquery.cxcolor/css/jquery.cxcolor.css">
	<script src="<?php echo base_url($this->config->item('public'))?>/assets/js/jquery.cxcolor/js/jquery.cxcolor.min.js"></script>
	<script src="<?php echo base_url($this->config->item('public'))?>/assets/js/jquery.form.js"></script>
	<script src="<?php echo base_url($this->config->item('public'))?>/assets/js/jquery-validation/jquery.validate.min.js"></script>
	<script src="<?php echo base_url($this->config->item('public'))?>/assets/js/artDialog/jquery.artDialog.js?skin=zopo"></script>
<script>
	$(function (){
	
		//form 
		var form = $("#form_makeEcard");
		
//==============预览		
		var options = {
			url:"<?php echo site_url('ecard/createPreview')?>",
			dataType:'json',
			beforeSubmit:function (){
				return true;
			},
			success:function (json){
				if(sys_login(json.error)){return ;}
				if(json.error != 0){
						$.dialog({
							id:'preview#Error',
							content:json.error,
							icon:'error',
							lock:true,
							esc:false
						});
						return false;
					}else{
						img2clear =  json.result_image;
						var previewssuccess = $.dialog({
							id:'previews#success',
							title:'设计预览(关闭后继续)',
							content:"<div><img src='<?php echo base_url();?>"+json.image+"'></div>",
							lock:true,
							esc:false,
							cancel:function (){
								$.ajax({
									type: 'POST',
									url:"<?php echo site_url('ecard/clearImage/')?>",
									data:"img="+img2clear
								});
							},
							cancelVal:"关闭并继续"
						});
						
						art.list['previewssuccess'].position();
						
					}
			}
		};
		
		$("#Preview").click(function (){
			
			form.ajaxForm();
			
			form.ajaxSubmit(options);
			return false;
		});

//==============创建
		var Submitoptions = {
			url:"<?php echo site_url('ecard/createAction')?>",
			dataType:'json',
			beforeSubmit:function (){
				form.validate();
				return form.valid();
			},
			success:function (json){
				if(sys_login(json.error)){return ;}
				if(json.error != 0){
					$.dialog({
						id:'ex#Error',
						content:json.error,
						icon:'error',
						lock:true,
						esc:false
					});
					return false;
				}else{
					window.location.href = "<?php echo site_url('ecard/confirm');?>"+"/"+json.ecard_id;
					$.dialog({
						id:'ex#success',
						content:'成功',
						esc:false
					});
					form.resetForm();
				}
			},
			resetForm:false
		};
		$("#Submit").click(function (){

			form.ajaxForm();
					
			form.ajaxSubmit(Submitoptions);
			return false;
		
		});
		
		//调色板
		$("input[name='fontColor[]']").each(function(index){
			$(this).cxColor({color:$(this).val()});
			
			$(this).bind('change',function(){
		
			color = $(this).val();
			
			$(this).prevAll("[name='attr[]']").css('color',color);
			});
			
		});
		
		//字型

		//字号

	});
</script>